<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 目录管理结构 -->
        <!-- 面包屑 -->
        <div class="ml_breadcrumb" v-if="$route.query.id">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>学科管理</el-breadcrumb-item>
            <el-breadcrumb-item>{{$route.query.name}}</el-breadcrumb-item>
            <el-breadcrumb-item>目录管理</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <!-- 目录名称+状态 -->
        <div class="ml_title">
          <div class="ml_form">
            <el-form ref="formRef" :model="queryForm">
              <el-form-item>
                <span>目录名称</span
                ><el-input
                  v-model="queryForm.directoryName"
                  class="ml_item_input"
                  size="small"
                ></el-input>
                <span class="ml_margin">状态</span>
                <el-select
                  v-model="queryForm.state"
                  class="ml_item_input"
                  size="small"
                >
                  <el-option
                    v-for="item in states"
                    :key="item.value"
                    :value="item.value"
                    :label="item.label"
                  ></el-option>
                </el-select>
                <el-button size="mini" @click="clearForm">清除</el-button>
                <el-button size="mini" type="primary" @click="handleClick"
                  >搜索</el-button
                >
              </el-form-item>
            </el-form>
          </div>
          <!-- 新增目录按钮 -->
          <div class="ml_title_button">
            <div v-if="$route.query.id" @click="$router.push('/subjects/list')">
              <el-button type="text" icon="el-icon-back" >返回学科</el-button>
            </div>
            <div style="margin-left:10px">
              <el-button
                type="success"
                icon="el-icon-edit"
                size="small"
                @click="addDirectorys('add')"
                >新增目录</el-button
              >
            </div>
          </div>
        </div>
        <!-- 消息提示 -->
        <div class="ml_message">
          <el-alert :closable="false" :title="counts" type="info" show-icon>
          </el-alert>
        </div>

        <!-- 表格 -->
        <div>
          <el-table
            class="ml_table_background"
            :header-cell-style="{ background: '#fafafa' }"
            :data="directList"
          >
            <el-table-column
              type="index"
              label="序号"
              width="80px"
            ></el-table-column>
            <el-table-column
              prop="subjectName"
              label="所属学科"
            ></el-table-column>
            <el-table-column
              prop="directoryName"
              label="目录名称"
            ></el-table-column>
            <el-table-column prop="username" label="创建者"></el-table-column>
            <el-table-column prop="addDate" label="创建日期">
              <template #default="{ row }">
                <span>{{ FormData(row.addDate) }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="totals" label="面试题数量"></el-table-column>
            <el-table-column prop="state" label="状态">
              <template #default="{ row }">
                <span>{{
                  row.state === 1 ? '已启用' : row.state === 0 ? '已禁用' : '无'
                }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="150px">
              <template #default="{ row }">
                <el-button type="text" @click="pointMessage(row)">
                  <span>{{ row.state === 0 ? '启用' : '禁用' }}</span>
                </el-button>
                <el-button
                  :disabled="row.state === 1"
                  type="text"
                  @click="addDirectorys('edit', row.id)"
                  >修改</el-button
                >
                <el-button
                  :disabled="row.state === 1"
                  type="text"
                  @click="delClick(row.id)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 分页器 -->
        <div>
          <el-row type="flex" justify="end" style="height: 60px" align="middle">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="queryForm.page"
              :page-sizes="[5, 10, 20, 50]"
              :page-size="queryForm.pagesize"
              layout=" prev, pager, next, sizes, jumper"
              :total="total"
            >
            </el-pagination>
          </el-row>
        </div>
      </el-card>
    </div>
    <!-- 展示对话框组件 -->
    <directorys-add
      ref="getRef"
      :showDialog.sync="showDialog"
      @getDirectoryList="getDirectoryList"
      :currentId="currentId"
      :directList="directList"
      @editpage="editpage"
    ></directorys-add>
  </div>
</template>

<script>
import { status } from '@/api/hmmm/constants.js'
// 引入对话框组件
import DirectorysAdd from '@/module-hmmm/components/directorys-add'
// 引入dayjs
import dayjs from 'dayjs'
import { list as getCompanys } from '@/api/hmmm/companys.js'
import { list as getQuestion } from '@/api/hmmm/questions'
import { list, remove, changeState } from '@/api/hmmm/directorys.js'

export default {
  components: {
    DirectorysAdd
  },
  data () {
    return {
      // 请求参数
      queryForm: {
        page: 1, // 当前页
        pagesize: 10, // 每页多少条
        subjectID: null, // 学科id
        directoryName: '', // 目录名称
        state: null // 状态 1开启 0屏蔽
      },
      // 目录列表数据
      directList: [],
      total: 0, // 总条数
      // 对话框显示与隐藏
      showDialog: false,
      // 记录点击编辑的id
      currentId: null,
      data: {}
    }
  },
  created () {
    getCompanys()
    getQuestion()
    // 获取目录列表数据
    this.getDirectoryList()
  },
  computed: {
    // 总条数
    counts () {
      return `数据一共${this.total}条`
    },
    // 状态
    states () {
      return status
    }
  },
  methods: {
    // 获取目录列表数据
    async getDirectoryList () {
      const { data } = await list(this.queryForm)
      this.directList = data.items
      this.total = data.counts
      // console.log(this.total)
      // console.log(this.directList)
    },
    // 转换时间戳
    FormData (value) {
      return dayjs(value).format('YYYY-MM-DD hh:mm:ss')
    },
    // currentPage 当前页改变时会触发
    handleCurrentChange (newPage) {
      // console.log(newPage)
      this.queryForm.page = newPage
      // 刷新列表
      this.getDirectoryList()
    },
    // 改变时会触发（每页条数）
    handleSizeChange (newPageSize) {
      console.log(newPageSize)
      this.queryForm.pagesize = newPageSize
      // 刷新列表
      this.getDirectoryList()
    },
    // 点击清除表单数据
    clearForm () {
      // 手动清空
      this.queryForm.directoryName = ''
      this.queryForm.state = null
      this.$refs.formRef.resetFields()
      // 刷新列表
      this.getDirectoryList()
    },
    // 点击新增目录
    addDirectorys (type, id) {
      if (type === 'add') {
        // 打开对话框
        this.showDialog = true
        this.currentId = id
      } else if (type === 'edit') {
        // 打开对话框
        this.showDialog = true
        this.currentId = id
        // 调用子组件的方法
        this.$nextTick(() => {
          this.$refs.getRef.getDirectDetail()
        })
      }
    },
    // 删除目录
    delClick (id) {
      this.$confirm('你确定要删除这条目录吗？, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          // 调删除接口
          await remove({ id, ...this.directList })
          // 判断删除的是不是最后一页的最后一个
          if (this.directList.length === 1 && this.queryForm.page > 1) this.queryForm.page--
          // 提示用户：删除成功
          this.$message.success('删除成功')
          // 刷新列表
          this.getDirectoryList()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 搜索信息
    handleClick () {
      // 页码值显示第一页
      this.queryForm.page = 1
      // 刷新列表
      this.getDirectoryList()
    },
    // 点击禁用
    async pointMessage (row) {
      // 提示用户
      this.$message({
        message: '操作成功',
        type: 'success'
      })
      // 定义接口要的数据
      var data = {
        id: row.id,
        state: Number(!row.state)
      }
      // 调用状态接口
      await changeState(data)
      // 刷新列表
      this.getDirectoryList(this.queryForm)
    },
    // 调用子组件传的方法
    editpage (value) {
      this.queryForm.page = value
    }
  }
}
</script>

<style scoped lang="scss">
.app-container {
  padding: 10px;
}
// 面包屑样式
.ml_breadcrumb {
      margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid #ebeef5;
}
/* 头部表单样式 */
/* 表单的宽度 */
.ml_form {
  width: 80%;
  span {
    color: #606266;
    font-weight: bold;
  }
}
/* 状态文字样式 */
.ml_margin {
  margin-left: 30px;
}
/* 表单输入框+下拉列表的样式 */
.ml_item_input {
  width: 200px;
  height: 32px;
  margin-left: 10px;
  margin-right: 10px;
}
/* 表单和新增目录的样式 */
.ml_title {
  display: flex;
  justify-content: space-between;
}
/* 消息提示样式 */
.ml_message {
  width: 100%;
  background-color: #f4f4f5;
  color: #909399;
  // padding: 8px 16px;
  font-size: 13px;
  margin-bottom: 15px;
}
.ml_title_button {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #409eff;
}
// 表格
</style>
